<script setup lang="ts">

import {useDraggable} from "@/useDraggable";
import {computed, nextTick, onMounted, ref, useTemplateRef} from "vue";

const props = defineProps({
  id: String,
  pid: Number,
  color: String,
  scale: Number,
  parentRef: Object,
  position: () => ({x: 0, y: 0}),
})

const pointRef = useTemplateRef("pointRef")

const parent = ref()
nextTick(()=>{
  parent.value = document.getElementById('point_box')
})
// 图片
const {position: position_o} = useDraggable(pointRef, parent, true);
const position = computed(() => ({
  x: position_o.value.x * props.scale / 10,
  y: position_o.value.y * props.scale / 10
}))

</script>

<template>
  <div ref="pointRef" class="rounded-full w-5 h-5 absolute cursor-pointer"
       :style="{
          backgroundColor:color,
          top: position.y + 'px',
          left: position.x + 'px',
       }"></div>
</template>

<style scoped>

</style>